import { Spin, Tabs } from 'antd';
import { LabeledValue } from 'antd/lib/select';
import React, { useEffect, useState } from 'react';
import { RouteComponentProps } from 'react-router-dom';
import { getClassroom2List, IClassroom2Group } from '../../api/threeApi';
import Footer from '../../components/Footer/Footer';
import Goback2Top from '../../components/Goback2Top';
import Radio from '../Radio/Radio';
import './Discovery.scss';

type IPropsIndex = RouteComponentProps;

export default function ClassRoom(props: IPropsIndex) {
	const [dataList, setDataList] = useState<IClassroom2Group[]>([]);
	const [loading, setLoading] = useState(true);

	useEffect(() => {
		fetchData();
	}, []);

	const fetchData = () => {
		setLoading(true);
		getClassroom2List({
			offset: 0,
			limit: 10,
		})
			.then((res) => {
				setDataList(res.items);
			})
			.catch((err) => {})
			.finally(() => setLoading(false));
	};

	return (
		<div className="content userCenter">
			<Goback2Top />
			<div className="p-r">
				<img className="w100" src={require('../../image/community.png').default} alt="" />
				<div className="d-f jc ac w100 p-a c-text-w" style={{ top: 80 }}>
					<div>
						<div className="" style={{ fontSize: 60 }}>
							第二课堂
						</div>
						{/* <div className="fs30">让孩子掌握创造未来的语言</div> */}
					</div>
				</div>
			</div>
			<div className="d-f jc">
				<div className="w1200 br10 p-r pt28">
					{dataList.map((group, groupIndex) => {
						return (
							<div key={`group${groupIndex}`}>
								<div className="d-f ac pb40">
									<img src={require('../../image/collect2.png').default} alt="" />
									<span className="strong fs20 pl16">{group.name}</span>
								</div>
								<div className="d-f fw">
									{group.courses.map((course, courseIndex) => (
										<div
											className="cp mr20 mb32 bg-w ov-h"
											style={{ borderRadius: 6 }}
											key={`course${course.id}`}
											onClick={() => {
												// props.history.push(`/workDetail/${item.id}`);
												window.open(
													`https://h5.sanzhishizi.com/share-course?courseId=${course.id}&lessonId=${course.first_lesson_id}`,
													'blank',
												);
											}}
										>
											<div className="w220 h156 bg-theme2 br0 ov-h">
												<img className="w100" src={course.cover} alt="" />
											</div>
											<div className="pb14 plr8 w220">
												<div className="strong pt8 w100 ellip1">{course.title}</div>
												<div className="d-f ac pt8">
													{course.tags.map((tag, tagIndex) => {
														return (
															<span
																className="plr6 bor b-side fs12 br6 mr8"
																key={`tag${tagIndex}`}
															>
																{tag}
															</span>
														);
													})}
												</div>
												<div className="d-f ac jc-b pt8 fs12">
													<span className="c-hint-b">讲师：{course.lecturer_name}</span>
													<span className="pl6 ellip1">
														{course.price ? `¥${course.price}` : '免费'}
													</span>
												</div>
											</div>
										</div>
									))}
								</div>
							</div>
						);
					})}
				</div>
			</div>
			<Footer {...props} />
		</div>
	);
}
